<template>
  <div class="box-body">
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">应聘信息</h3>
      </div>
      <div class="box-body">
        <el-form :model="editEmploysource" :rules="rules" ref="editEmploysource" label-width="150px">
          <div class="row">
            <div class="col-md-4">
              <el-form-item label="现工作单位" prop="depart" :required='true'>
                <Depart ref='depart' :disabled="!isEditable" :selectedDepart='editEmploysource.depart' @departchanged="val => editEmploysource.depart = val"></Depart>
              </el-form-item>
            </div>
            <div class="col-md-4">
              <el-form-item label="进入本系统时间" prop="enterTime">
                <MyDatePicker :editable="isEditable" v-bind:date="editEmploysource.enterTime" @timeChanged="(time)=>this.editEmploysource.enterTime =time">
                </MyDatePicker>
                <!-- <el-date-picker :disabled="!isEditable" :month="1" v-model="editEmploysource.enterTime" @change="(time)=>this.editEmploysource.enterTime =time" type="month" placeholder="选择日期">
                </el-date-picker> -->
              </el-form-item>
            </div>
            <div class="col-md-4">
              <el-form-item label="来源渠道" :required='true'>
                <el-select :disabled="!isEditable" v-model="editEmploysource.channel">
                  <el-option v-for="item in this.$store.state.sysconfigs.channels" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import Channel from '../../mycomponents/common/Channel'
  import Depart from '../../mycomponents/common/Depart'
  import MyDatePicker from '../../mycomponents/common/MyDatePicker'
  export default {
    name: 'UserSource',
    props: ["employsource","editable"],
    data: function() {
      var departValidator = (rule, value, callback) => {
        if (!value || value.length == 0) {
          return callback(new Error('请选择工作单位'))
        } else {
          return callback()
        }
      };
      return {
        isEditable: true,
        editEmploysource: {
          channel: 1,
          depart: [],
          enterTime: ''
        },
        rules: {
          enterTime: [{
            required: true,
            message: "请输入进入本系统时间",
            trigger: "change"
          }],
          channel: [{
            required: true,
            message: "请输入来源渠道",
            trigger: "change"
          }],
          depart: [{
            validator: departValidator,
            message: "请选择工作单位",
            trigger: 'departchanged'
          }]
        }
      }
    },
    components: {
      Channel,
      Depart,
      MyDatePicker
    },
    created: function() {
      if (this.editable != null && this.editable != undefined) {
        this.isEditable = this.editable
      }
      if (this.employsource) {
        this.editEmploysource = this.employsource
      }
    },
    methods: {
      getData() {
        var validRes = true
        this.$refs.editEmploysource.validate((valid) => {
          if (valid) {
            validRes = true
          } else {
            console.log('error submit!!');
            validRes = false
            return false;
          }
        });
        console.log("editEmploysource:", JSON.stringify(this.editEmploysource));
        if (!validRes) {
          return null
        }
        return this.editEmploysource;
      }
    }
  }
</script>
